<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr'
import { reactive, inject, onMounted } from 'vue'
import { getStyles } from './index'
const nodeConfig = reactive({
  nodeData: {
    contentBackgroundColor: 'black',
    contentColor: 'white'
  },
  value: '',
  styles: null,
  isInit: false
})
const getNode = inject('getNode')
const updateData = (nodeData) => {
  const { contentValue } = nodeData
  nodeConfig.styles = getStyles(nodeData)
  nodeConfig.value = contentValue || '二维码'
  nodeConfig.nodeData = nodeData
  nodeConfig.isInit = true
}

onMounted(() => {
  const node = getNode()
  const nodeData = node.getData()
  updateData(nodeData)
  node.on('change:data', ({ current }) => {
    updateData(current)
  })
})
</script>

<template>
  <div
    class="qr-code-node overflow-hidden"
    :style="nodeConfig.styles"
    v-if="nodeConfig.isInit"
  >
    <vue-qr
      :colorDark="nodeConfig.nodeData.contentBackgroundColor"
      :colorLight="nodeConfig.nodeData.contentColor"
      :text="nodeConfig.value"
      :margin="0"
      class="w-full h-full"
    ></vue-qr>
  </div>
</template>
